<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <title>Music</title>
    <style type="text/css">
    	body{
    		font-size: 8em;
    		color: white;
    		background-color: #fafafa;
    		text-align: center;
    		
    	}
		.ifrm iframe{
			/*width: 100%;*/
			display: none;
		}
		.ifmusictitle{ position: absolute;color: #5b5b5b; font-size:0.5em; text-align: center; width: 100%;}
		.ifmusictime{right: 5%; position: absolute;color: #8a8c8c; font-size:0.5em; text-align: right; width: 100%;}
		.divbtn div{
			width: 50%;
			color: #5b5b5b;
			/*background-color: rgb(214,214,214);*/
			border-top: 3px solid rgb(214,214,214);
			border-bottom: 3px solid rgb(214,214,214);
			float:left;
			margin: 5% 0% 2% 0%;
			cursor: pointer;
			word-spacing: 10px;
		}
		.search{
			color: black;
			width: 60%;
			border: 10px solid rgb(241,241,241);
			text-align: center;

		}
		.divcontent div{
			width: 40%;
			color: #6c6c6c;
			border: 3px solid rgba(0,0,0,0.5);
			background-color: white;
			float:left;
			border-radius: 15px;
			margin: 2% 5%;
			padding: 1%;
			font-size: 0.5em;
			text-align: left;
			box-shadow: -2px 2px 13px #5b5b5b;
			cursor: pointer;
		}
		.divcontent .clicker{ color:white; background-color:#dedede; }
		.divcontent div p{ text-align: right;  }


    </style>
</head>

<body>
	
	<div class="container-fluid">

		<div class="row ifrm">
			<iframe id="musiciframe" src="" frameborder="0"></iframe>
		</div>

		<div class="row" style=" position:fixed;width:100%;background-color: #fafafa;">
			<div class="ifmusictitle"> No Sound . </div>
			<div class="ifmusictime"> 5 : 00 </div>
			<div class="row divbtn">
				<div onclick="musicData.nextMusic()">随 机</div>
				<div onclick="musicData.open()" style="border-left: 3px solid rgb(214,214,214);">OPEN</div>

			</div>

			<div class="row">
				<input class="search" type="text" value="" />
				<span onclick="musicData.searchclick()" style="background-color: rgb(214,214,214); padding:1%; border-radius: 10px; cursor: pointer;">搜索</span>
			</div>

			<div class="row" style=" height:3px; background-color:rgb(214,214,214); margin-top:3%; margin-bottom:2%;"></div>

		</div>
		<div class="row" style=" display:block; margin-top:40%;"></div>

		<div class="row divcontent"></div>

	</div>

	<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
</body>

</html>

<script type="text/javascript">

$(function(){
	$.getJSON('../../js/music.json', function(json, textStatus) {
		JsonData = json;
		musicData.initMusic();

		loadUrl();
	});


})

function loadUrl(){
	var url = window.document.location.href;
	var uls = url.split('/');
	if (uls.length > 0) {
		var n = decodeURI(uls[uls.length-1]);
		var u = JsonData.music.filter(function(x) { return x.n == n })[0].url;
		$('#musiciframe').attr( 'src', u);
	}
}

JsonData: {};
var musicData = {
	datalen: 0,
	now: 0,		//当前播放
	prev: 0,	//上一首
	Allarr: [],	//总随机数组
	musicTime: null,
	initMusic: function(){
		this.datalen = JsonData.music.length;
		this.Allarr = [];
		w=0;while(w < this.datalen){ this.Allarr.push(w); w++; }

		var rand = parseInt(Math.random() * this.datalen);
		this.now = rand;
		this.prev = rand;
		// $('#musiciframe').attr( 'src', JsonData.music[rand].url);
		
		this.appendContainMusic(this.randomArr());

	},
	randomArr:function(){
		if (this.Allarr.length <= 0) return;
		var Rarr = [];
		for(var i=0; i<15; i++){
			var len = this.Allarr.length;
			var rand = parseInt(Math.random() * len);
			var v = this.Allarr[rand];
			Rarr.push(v);
			this.Allarr.remove(rand);
			if (this.Allarr.length == 0) { break; };
		}
		return Rarr;
	},
	nextMusic: function(){
		var rand = parseInt(Math.random() * this.datalen);
		if (rand == this.prev) { this.nextMusic(); return;}
		$('#musiciframe').attr( 'src', JsonData.music[rand].url);
		$('.ifmusictitle').html( JsonData.music[rand].n +' - '+ JsonData.music[rand].a);
		this.outofTime(JsonData.music[rand].t);
		this.prev = rand;
	},
	appendContainMusic: function(arr){
		var Html = '';
		if (arr!=undefined) {
			for(var i=0; i<arr.length; i++){
				var mn = JsonData.music[arr[i]].n;
				var ma = JsonData.music[arr[i]].a;
				var mu = JsonData.music[arr[i]].url;
				var tH = JsonData.music[arr[i]].t != "0" ? 
						"onclick='musicData.contmusicclick($(this), \""+mn+"\",\""+ma+"\"); $(\"#musiciframe\").attr(\"src\", \""+ mu +"\")' " 
						:
						"style=\"background-color:#303030; color:white;\" onclick='$(\"#musiciframe\").attr(\"src\", \""+ mu +"\"); window.open($(\"#musiciframe\").attr(\"src\"));' ";
			
				Html += "<div "+ tH +" >"+
						 	mn + "<br><p>" +
						 	ma +
						"</p></div>";
			}
		}
		$('.divcontent').append(Html);
	},
	contmusicclick: function(_this, _name, _author){
		$('.divcontent div').removeClass('clicker');
		_this.addClass('clicker');

		$('.ifmusictitle').html( _name +' - '+ _author);	//头部标题
		clearInterval(this.musicTime);		//循环歌曲，不随机
		$('.ifmusictime').html('Loop');

	},
	searchclick: function(){
		var se = $('.search').val();
		var Html = '';
		$('.divcontent').html('');

		if (se=='') { this.initMusic();history.go(0);  }
			this.Allarr = JsonData.music.filter(function(x) { return x.n == se });
		if (this.Allarr.length <= 0) {
			this.Allarr = JsonData.music.filter(function(x) { return x.a == se });
		}
		//模糊查找 (首字)
		if (this.Allarr.length <= 0) { 
			this.Allarr = JsonData.music.filter(function(x) {return (x.n.substr(0,1) == se)});
		}
		if (this.Allarr.length <= 0) {
			this.Allarr = JsonData.music.filter(function(x) { return (x.a.substr(0,1) == se) });
		}


		this.randomArr().forEach(function(x){
			var tH = x.t != "0" ? 
						"onclick='musicData.contmusicclick($(this), \""+x.n+"\",\""+x.a+"\"); $(\"#musiciframe\").attr(\"src\", \""+ x.url +"\")' " 
						:
						"style=\"background-color:#303030; color:white;\" onclick='$(\"#musiciframe\").attr(\"src\", \""+ x.url +"\"); window.open($(\"#musiciframe\").attr(\"src\"));' ";
			Html += "<div "+ tH +" >"+
					 	x.n + "<br><p>" +
					 	x.a +
					"</p></div>";
		})
		$('.divcontent').append(Html);
	},
	open: function(){
		window.open($('#musiciframe').attr('src'));
	},
	outofTime: function(_musictime){
		var t;
		$('.ifmusictime').css('color','#8a8c8c')
		if(_musictime == "0") t = 0;
		else if(typeof _musictime == "string" && _musictime != "") 
			t = parseInt(_musictime.split(':')[0]) * 60 + Number(_musictime.split(':')[1]);
		else { t = 300; $('.ifmusictime').css('color','#00CC99'); }

		if(this.musicTime!=null) clearInterval(this.musicTime);
		this.musicTime = setInterval(function(){
			$('.ifmusictime').html(' '+ parseInt(t/60) +' : '+ parseInt(t%60) +' ');
			t--;
			if (t<=0) {
				clearInterval(this.musicTime);
				musicData.nextMusic();
			}
		}, 1000);
	}
}

	
var loading = false;
$(window).scroll(function (){
    if ((($(window).scrollTop() + $(window).height()) + 250) >= $(document).height())
    {
        if (loading == false)
        {
            loading = true;
            
            musicData.appendContainMusic(musicData.randomArr());

            loading = false;
            
            
        }
    }
});

Array.prototype.remove=function(dx){
　　if(isNaN(dx)||dx>this.length){return false;}
　　for(var i=0,n=0;i<this.length;i++)
　　{
　　　　if(this[i]!=this[dx])
　　　　{
　　　　　　this[n++]=this[i]
　　　　}
　　}
　　this.length-=1
}



</script>






